<template>
	<view class="main">
		<view class="top">
			<view class="h1">
				请选择认证角色
			</view>
			<view class="p">
				请按照真实情况如实选择
			</view>
		</view>

		<navigator :url="'./webView?type=1&from=' + type + '&id=' + id"
			class="row uni-flex uni-justify-content-sb uni-align-items-c" hover-class="none">
			<view class="lf">
				<view class="role">
					总包部
				</view>
				<view class="des">
					xxx项目的负责及管理人员
				</view>
			</view>
			<view class="rt">
				<image src="../../static/image/self-certification-1.png" mode=""></image>
			</view>
		</navigator>
		<navigator :url="'./webView?type=2&from='+ type + '&id=' + id"
			class="row uni-flex uni-justify-content-sb uni-align-items-c" hover-class="none">
			<view class="lf">
				<view class="role">
					项目人员
				</view>
				<view class="des">
					xxx项目的项目人员
				</view>
			</view>
			<view class="rt">
				<image src="../../static/image/self-certification-2.png" mode=""></image>
			</view>
		</navigator>
		<navigator :url="'./webView?type=5&from='+ type + '&id=' + id"
			class="row uni-flex uni-justify-content-sb uni-align-items-c" hover-class="none">
			<view class="lf">
				<view class="role">
					监理
				</view>
				<view class="des">
					xxx项目的监管人员
				</view>
			</view>
			<view class="rt">
				<image src="../../static/image/self-certification-3.png" mode=""></image>
			</view>
		</navigator>
		<view @click="skip(3)" class="row uni-flex uni-justify-content-sb uni-align-items-c" hover-class="none">
			<view class="lf">
				<view class="role">
					劳务人员
				</view>
				<view class="des">
					xxx项目的建设与施工人员
				</view>
			</view>
			<view class="rt">
				<image src="../../static/image/self-certification-4.png" mode=""></image>
			</view>
		</view>
		<view @click="skip(4)" class="row uni-flex uni-justify-content-sb uni-align-items-c" hover-class="none">
			<view class="lf">
				<view class="role">
					访客
				</view>
				<view class="des">
					xxx项目的拜访人员
				</view>
			</view>
			<view class="rt">
				<image src="../../static/image/self-certification-5.png" mode=""></image>
			</view>
		</view>
		<navigator v-if="type=='others'" url="./othersAuthenticatedList" hover-class="none" class="navigator">
			帮他人认证历史
			<u-icon name="arrow-right-double" color="#737373" size="28"></u-icon>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				id: '', //用户id
				userInfo: null,
				isShow: true,
			}
		},
		onLoad(options) {
			console.log('options.id',options.id);
			this.$u.api.bidFindAll().then(res => {
				console.log(res.data);
			})

			this.type = options.type;
			
			if (options.type == 'self') {
				uni.setNavigationBarTitle({
					title: '本人认证'
				})
				this.id = uni.getStorageSync('user').id;
			} else if (options.type == 'others') {
				uni.setNavigationBarTitle({
					title: '帮他人认证'
				})
				this.id = options.id ? options.id : '';
			}
		},
		methods: {
			skip(e) {
				let bid = uni.getStorageSync('bid');
				uni.navigateTo({
					url: './webView?type=' + e + '&from=' + this.type + '&id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.top {
			height: 184rpx;
			background: #30A1FF;
			padding: 0 28rpx;
			padding-top: 22rpx;
			border-bottom-right-radius: 100rpx;

			.h1 {
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.p {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 8rpx;
			}
		}

		.row {
			background: #FFFFFF;
			height: 180rpx;
			border-radius: 20rpx;
			margin: 32rpx 36rpx;
			margin-bottom: 0;
			padding: 0 40rpx;

			.lf {
				.role {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					position: relative;
					display: inline-block;
				}

				.role::after {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-left: 16rpx solid #30A1FF;
					border-right: 16rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					position: absolute;
					right: -50rpx;
					top: 12rpx;
				}

				.des {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #737373;
					margin-top: 10rpx;
				}
			}

			.rt {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.row:last-child {
			margin-bottom: 32rpx;
		}

		.navigator {
			margin: 30rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #737373;
			text-align: center;
			line-height: 160rpx;
		}
	}
</style>
